<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-04-02 16:23:42
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-04 09:43:57
 * @FilePath: store.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user.store.js'
import { useRouter } from 'vue-router'
import api from "@/api/api";
import storeListItem from "@/components/store/storeListItem.vue";

// 使用 store 和 router
const store = useUserStore()
const router = useRouter()

// 响应式数据
const storeValue = ref(0)
const sort = ref("")
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const isTop = ref(true)
const bannerList = ref([])

const option1 = [
  { text: "智能排序", value: 0 },
  { text: "评分最高", value: 1 },
  { text: "距离最近", value: 2 },
]

const option2 = [
  { text: "服务项目", value: "" },
  { text: "好评排序", value: "b" },
  { text: "销量排序", value: "c" },
]

const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 计算属性
const locationInfo = computed(() => store.locationInfo)

// 方法
const onLoad = () => {
  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }
  getStoreList()
}

const onRefresh = () => {
  finished.value = false
  refreshing.value = true
  pageInfo.pageNum = 1
  loading.value = true
  onLoad()
}

const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  isTop.value = scrollTop < 50
}

const goDetail = (item) => {
  router.push({
    path: "/storeDetail",
    query: {
      id: item.id,
    }
  })
}

const getStoreList = () => {
  api.store.getStoreList({ ...pageInfo })
    .then((res) => {
      if (res.length == 0) finished.value = true
      list.value = [...list.value, ...res]
      if (res.length < pageInfo.pageSize) {
        finished.value = true
      }
    })
    .finally(() => (loading.value = false))
}

const goSearch = () => {
  router.push({
    path: "/search",
  })
}

const getBannerList = async () => {
  bannerList.value = await api.common.getHomeBannerList({
    positionType: 3,
  })
}

const link = (v) => {
  switch (v.type) {
    case 0:
      return
    case 1:
      router.push({
        path: "/serveDetail",
        query: {
          goodsId: v.keyId,
        }
      })
      break
    case 2:
      window.location.href = `${v.url}`
      break
    case 3:
    case 4:
    case 5:
    case 6:
    case 7:
      break
  }
}

// 生命周期
onMounted(() => {
  window.addEventListener("scroll", handleScroll)
  getBannerList()
})

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll)
})

// 暴露给模板（在 script setup 中通常不需要显式暴露）
</script>

<template>
  <div class="home">
    <div class="top" :style="{ background: isTop ? 'transparent' : '#82b4ef' }">
      <div class="address">
        <van-icon name="location-o" />{{ locationInfo.district || "长兴县" }}
      </div>
      <div class="search flex_b_c" @click="goSearch">
        <div style="display: flex; align-items: center">
          <van-icon name="search" color="#bfbfbf" class="search-icon" />
          <span class="placeholder">汽车保养</span>
        </div>
        <div class="search_btn">搜索</div>
      </div>
    </div>
    <!-- <div class="select_options">
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item v-model="store" :options="option1" />
        <van-dropdown-item v-model="sort" :options="option2" />
      </van-dropdown-menu>
    </div> -->
    <div class="banner">
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(v, i) in bannerList" :key="JSON.stringify(v) + i" @click="link(v)">
          <van-image width="100%" :src="v.picUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <storeListItem v-for="(v, i) in list" :key="i" :item="v" @click="goDetail(v)">
          </storeListItem>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>


<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
  box-sizing: border-box;
  padding: 150px 50px 150px 50px;
  position: relative;

  .top {
    position: fixed;
    padding: 30px 50px;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;

    .address {
      font-size: 44px;
    }

    .search {
      width: 960px;
      height: 0.75rem;
      background: #fff;
      border-radius: 999px;
      padding: 20px 20px 20px 40px;
      display: flex;
      align-items: center;

      .search-icon {
        font-size: 44px;
      }

      .placeholder {
        color: #bfbfbf;
        font-size: 44px;
        margin-left: 10px;
      }

      &_btn {
        width: 160px;
        height: 80px;
        border-radius: 40px;
        background: linear-gradient(to right, #015eea, #00bffa);
        font-size: 44px;
        color: #fff;
        text-align: center;
        line-height: 80px;
      }
    }
  }

  .select_options {
    margin-top: 30px;

     :deep(.van-dropdown-menu__bar) {
      background: rgba(255, 255, 255, 0.1);
      height: 110px;

      .van-dropdown-menu__title {
        font-size: 36px;
        color: #fff;
      }
    }

    :deep(.van-popup--top) {
      left: 4%;
      width: 92%;

      .van-cell {
        font-size: 35px;
      }
    }
  }

  .banner {
    margin-top: 20px;
  }

  .list {
    margin-top: 35px;

    :deep(.van-list__finished-text) {
      height: 200px;
      font-size: 44px;
    }
  }

  .flex_b_c {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
